<template>
    <div style="text-align: center">
            <a-result :title="result && result.name">
                <template #icon>
                    <smile-twoTone />
                </template>
                <template #extra>
                    {{result && result.address}}
                </template>
            </a-result>
        <a-button type="primary" @click="changeStatus()">加载一次数据</a-button>
        <p style="margin-top: 10px">
            <a-button type="primary" ghost @click="setLoading(3)">等待</a-button>
        </p>
    </div>

</template>

<script lang="ts">
    import { SmileTwoTone } from '@ant-design/icons-vue';
    import { defineComponent,inject, reactive } from 'vue';
    import saveData from "../../store/storage";
    import {
        api_updateUser
    } from "@api";

    export default defineComponent({
        components: {
            SmileTwoTone,
        },
        setup(){
            let loginInfo: any = saveData.storage.getItem('loginInfo');
            let result = reactive(loginInfo)

            let loadingStatus:any = inject("setLoadingStatus")
            const setLoading = (s)=>{
                loadingStatus(true)
                setTimeout(()=>{
                    loadingStatus(false)
                },s*1000)
            }

            const changeStatus= ()=>{
                api_updateUser().then(res=>{
                    if(res.code == 200){
                        result.name = res.data.name
                        result.address = res.data.address
                    }
                })
            }

            return {
                changeStatus,
                result,
                setLoading
            }
        }
    });
</script>

<style scoped>

</style>
